<template>
  <el-dialog :title="!dataForm.id ? '消息模板新增' : '消息模板修改'" :close-on-click-modal="false" :visible.sync="visible"
    fullscreen center append-to-body>
    <el-button class="miui-dialog-close-btn" @click="visible = false">关闭页面</el-button>
    <el-form size="medium" :model="dataForm" :rules="dataRule" ref="dataForm" label-width="80px">
      <el-form-item label="消息标题" prop="title">
        <el-input v-model="dataForm.title" placeholder="消息标题"></el-input>
      </el-form-item>
      <el-form-item label="消息内容" prop="content">
        <el-input v-model="dataForm.content" placeholder="消息内容"></el-input>
      </el-form-item>

      <el-form-item label="链接类型" prop="linkType">
        <el-select v-model="dataForm.linkType" placeholder="请选择" style="width: 320px;">
          <el-option :value="1" label="直接跳转至外部网址活系统应用"></el-option>
          <el-option :value="2" label="直接跳转至内部文章"></el-option>
        </el-select>
      </el-form-item>


      <el-form-item label="跳转配置" prop="jumpConfiguration" v-if="dataForm.linkType == 1">
        <el-radio-group v-model="dataForm.jumpConfiguration">
          <el-radio :label="1">直接跳转到一个网站</el-radio>
          <el-radio :label="2">直接跳转到应用</el-radio>
        </el-radio-group>
      </el-form-item>


      <el-form-item label="跳转应用选择" prop="appSelect" v-if="dataForm.linkType == 1 && dataForm.jumpConfiguration == 2">
        <el-select v-model="dataForm.appSelect" placeholder="请选择">
          <el-option :value="1" label="调查问卷"></el-option>
          <el-option :value="2" label="代金券"></el-option>
        </el-select>
      </el-form-item>
      <el-form-item label="外部网址" prop="externalUrl" v-if="dataForm.linkType == 1">
        <el-input v-model="dataForm.externalUrl" placeholder="外部网址"></el-input>
      </el-form-item>
      <el-form-item label="说明" prop="memo" v-if="dataForm.linkType == 1 && dataForm.jumpConfiguration ==1">
        {{dataForm.memo}}
      </el-form-item>
      <el-form-item label="调查问卷" v-if="dataForm.linkType == 1 && dataForm.jumpConfiguration == 2 && dataForm.appSelect ==1">
        <el-input v-model="dataForm.linkObjectName" placeholder="调查问卷" readonly>
          <el-button slot="append" @click="openDialog('question')">选择</el-button>
        </el-input>
      </el-form-item>
      <el-form-item label="代金券" v-if="dataForm.linkType == 1 && dataForm.jumpConfiguration == 2  && dataForm.appSelect ==2">
        <el-input v-model="dataForm.linkObjectName" placeholder="代金券" readonly>
          <el-button slot="append" @click="openDialog('question')">选择</el-button>
        </el-input>
      </el-form-item>

      <el-form-item label="文章列表" v-if="dataForm.linkType ==2">
        <el-input v-model="dataForm.linkObjectName" placeholder="文章列表" readonly>
          <el-button slot="append" @click="openDialog('article')">选择</el-button>
        </el-input>
      </el-form-item>
    </el-form>
    <span slot="footer" class="dialog-footer">
      <el-button @click="visible = false">取消</el-button>
      <el-button type="primary" @click="dataFormSubmit()">确定</el-button>
    </span>

    <search-question v-if="questionVisible" ref="questionDialog" @refreshData="getQuestionData"></search-question>
    <search-article v-if="articleVisible" ref="articleDialog" @refreshData="getArticleData"></search-article>
  </el-dialog>
</template>

<script>
  import {
    getWxMessageTemplateObj,
    addWxMessageTemplateObj,
    putWxMessageTemplateObj
  } from '@/api/mp/wxmessagetemplate'

  import SearchQuestion from '../_check/SearchQuestionnaire'
  import SearchArticle from '@/views/mp/_components/SearchArticle'


  export default {
    data() {
      return {
        visible: false,
        questionVisible: false,
        articleVisible: false,
        dataForm: {
          id: 0,
          title: '',
          content: '',
          linkType: '',
          jumpConfiguration: 1,
          appSelect: '',
          externalUrl: '',
          memo: '跳转到一个网站，如跳转到百度首页，那输入：http://www.baidu.com',
          createTime: '',
          createUser: '',
          updateTime: '',
          updateUser: '',
          tenantId: ''
        },
        dataRule: {
          title: [{
            required: true,
            message: '消息标题不能为空',
            trigger: 'blur'
          }],
          content: [{
            required: true,
            message: '消息内容不能为空',
            trigger: 'blur'
          }],
          linkType: [{
            required: true,
            message: '链接类型(1-直接跳转至外部网址活系统应用，2-直接跳转至内部文章)不能为空',
            trigger: 'blur'
          }],
          jumpConfiguration: [{
            required: true,
            message: '跳转配置(1-直接跳转到一个网站,2-直接跳转到应用)不能为空',
            trigger: 'blur'
          }],
          appSelect: [{
            required: true,
            message: '跳转应用选择(1-调查问卷,2-代金券)不能为空',
            trigger: 'blur'
          }],
          // externalUrl: [{
          //   required: true,
          //   message: '外部网址不能为空',
          //   trigger: 'blur'
          // }]
        }
      }
    },
    components: {
      SearchQuestion,
      SearchArticle
    },
    methods: {
      init(id) {
        this.dataForm.id = id || 0
        this.visible = true
        this.$nextTick(() => {
          this.$refs['dataForm'].resetFields()
          if (this.dataForm.id) {
            getWxMessageTemplateObj(this.dataForm.id).then(response => {
              this.dataForm = response.data.data
            })
          }
        })
      },
      // 表单提交
      dataFormSubmit() {
        this.$refs['dataForm'].validate((valid) => {
          if (valid) {
            if (this.dataForm.id) {
              putWxMessageTemplateObj(this.dataForm).then(data => {
                this.$message.success('修改成功')
                this.visible = false
                this.$emit('refreshDataList')
              });
            } else {
              addWxMessageTemplateObj(this.dataForm).then(data => {
                this.$message.success('添加成功')
                this.visible = false
                this.$emit('refreshDataList')
              })
            }
          }
        })
      },
      // 打开弹窗
      openDialog(type){
        this[type + 'Visible'] = true
        this.$nextTick(() => {
          this.$refs[type + 'Dialog'].init()
        })
      },
      // 获取问题数据
      getQuestionData(data){
        this.$set(this.dataForm,'linkObjectName',data.title)
        this.$set(this.dataForm,'linkObjectId',data.id)
      },
      // 获取文章数据
      getArticleData(data){
        this.$set(this.dataForm,'linkObjectName',data.title)
        this.$set(this.dataForm,'linkObjectId',data.id)
      }
    }
  }
</script>
